<template>
  <VPage>
    <el-tabs class="w-full h-full info" type="card" v-model="activeType">
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item, index) in tabList"
        :key="index"
      >
        <component :is="item.component" v-if="loads[item.type]" />
      </el-tab-pane>
    </el-tabs>
  </VPage>
</template>
<script setup name="TaskPicture" lang="jsx">
import { reactive, toRefs } from "vue";
import designTask from "./design-task.vue";
import routineTask from "./routine-task.vue";
import { getOptions } from "@/api/index";

const tabList = [
  {
    label: "设计任务",
    name: "design",
    component: designTask,
    type: "design",
  },
  {
    label: "非设计任务",
    name: "routine",
    component: routineTask,
    type: "routine",
  },
];

const loads = reactive({ design: true });

const data = reactive({
  activeType: "design",
  options: {},
});
const { activeType, options } = toRefs(data);

// 下拉数据
const fetchOption = () => {
  getOptions({
    name: [
      "assignment.ImagesAssignment",
      "assignment.ImagesTag",
      "gallery.GoodsSkuGalleryContents",
    ],
  }).then((res) => {
    if (res.data["assignment.ImagesAssignment"][0].priorityText.length) {
      res.data["assignment.ImagesAssignment"][0].priorityText02 = res.data[
        "assignment.ImagesAssignment"
      ][0].priorityText.map((i) => {
        if (i.value == 1) {
          i.label = i.label + "(非常紧急)";
        } else if (i.value == 2) {
          i.label = i.label + "(紧急)";
        } else if (i.value == 3) {
          i.label = i.label + "(正常)";
        }
        return i;
      });
    }
    options.value = res.data;
  });
};
provide("options", options);

onMounted(async () => {
  fetchOption();
});

const init = () => {
  const { task_type } = JSON.parse(sessionStorage.getItem("_setForm")) || {};
  if (task_type) {
    activeType.value = task_type;
  }
  const { tableForm: { type: authType } = {} } = JSON.parse(
    sessionStorage.getItem("_table_form") || "{}"
  );

  if (authType) {
    activeType.value = authType;
  }
};

init();
onActivated(() => {
  init();
});

watch(
  () => activeType.value,
  (val) => {
    if (loads[val]) return;
    loads[val] = true;
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss">
.info {
  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__content {
    height: calc(100% - 40px);
    padding: 0;
  }

  .el-tab-pane {
    height: 100%;
  }
}
</style>
